<template>
    <div v-loading="loading">
        <div class="settingTagsSearch">
            <el-form :inline="true" >

                <el-form-item label="标签名" style="margin-left: 100px;">
                    <el-input v-model="name" placeholder="请输入标签名"></el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" circle @click="handelSearch"></el-button>
                <el-button round @click="handleReset">重置</el-button>

            </el-form>

        </div>
        <div class="settingTagsTable">
            <el-table
                    :data="list"
                    border
                    style="width: 801px">

                <el-table-column
                        align="center"
                        prop="tag_name"
                        label="标签名"
                        width="300">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="create_time"
                        label="创建时间"
                        width="300">
                </el-table-column>

                <el-table-column align="center" width="200">
                    <template slot-scope="scope">
                        <el-button
                                @click="settingTagsDelete(scope.row.id)"
                                icon="el-icon-delete"
                                type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <div class="settingTagsPage">
            <el-pagination
                    v-if="settingTagsVisible"
                    @current-change="settingTagsPage"
                    :page-size="10"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'settingTags',
        data() {
            return {
                list: [],
                total: 0,
                loading: false,
                settingTagsVisible: true,
                name: ''
            }
        },
        methods: {
            defaultData(page, name) {
                this.load = true;
                this.$http.get('/store/tags/list', {
                    params: {
                        token: localStorage.getItem('user_token'),
                        store_id: localStorage.getItem('user_store_id'),
                        pageSize: 10,
                        page: page,
                        name: name
                    }
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;

                        if (response.data.data.pagination.total < 10){
                            this.settingTagsVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },

            //删除标签
            settingTagsDelete(id){
                this.$confirm('是否删除该标签？','删除标签',{
                    cancelButtonText: '否',
                    confirmButtonText: '是',
                    type: 'warning'
                }).then( () => {
                    this.loading = true;
                    this.$http.get('/store/tags/del',{
                        params: {
                            token: localStorage.getItem('user_token'),
                            id: id
                        }
                    }).then(response => {
                        if (response.data.status === 'success'){
                            this.$message.success('删除成功');
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch( () => {
                        this.loading = false;
                    })

                })
            },

            settingTagsPage(page){
                this.defaultData(page);
            },

            handleReset(){
                this.name = '';
                this.defaultData();
            },

            handelSearch(){
                this.defaultData(1, this.name)
            }
        },
        mounted() {

            this.defaultData();
        }
    }
</script>

<style>
    .settingTagsTable {
        margin-left: 280px;
    }
    .settingTagsPage{
        margin-top: 24px;
        margin-left: 750px;
    }
    .settingTagsSearch{
        height: 80px;
        width: 1360px;
        margin-left: 350px;
        margin-top: 40px;
    }
</style>
